<template>
	<!-- 首页 二手交易详情组件 -->
  <view>
    <view :class="layerHidden ? 'layer-hidden' : ''" class="container">
      <view class="searchBox">
        <!-- #ifdef MP-WEIXIN -->

        <view>
          <view class="titleBar1">
            <u-search
              class="search1"
              bg-color="#F7F8FA"
              placeholder="搜索你想要的物品"
              v-model="keyword"
              :show-action="false"
              @change="search"
            >
            </u-search>
          </view>
        </view>

        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class="titleBar">
          <u-search
            class="search"
            bg-color="#F7F8FA"
            placeholder="搜索你想要的物品"
            v-model="keyword"
            :show-action="false"
            @change="search"
          >
          </u-search>
        </view>
        <!-- #endif -->
        <view class="u-m-p-50">
          <view class="u-demo-area u-flex u-row-center">
            <div class="addrBox">
              <pickerAddress
                class="addr"
                ref="addr"
                @fnpickerAddress="fnpickerAddress"
              >
              </pickerAddress>
              <u-icon
                color="rgb(192, 196, 204)"
                class="icons"
                name="arrow-down"
              ></u-icon>
            </div>

            <u-dropdown
              @close="handleClose"
              @open="handleOpen"
              :close-on-click-mask="mask"
              ref="uDropdown"
              :activeColor="activeColor"
              :borderBottom="borderBottom"
            >
              <u-dropdown-item></u-dropdown-item>

              <u-dropdown-item :title="wortypetitle">
                <div class="workType">
                  <workType @closeDropdown="closeDropdown" />
                </div>
              </u-dropdown-item>
              <u-dropdown-item
                @change="changeRecomand"
                v-model="orderSort"
                :title="recomandTitle"
                :options="options1"
              >
              </u-dropdown-item>
            </u-dropdown>
          </view>
        </view>
      </view>

      <!-- #ifdef MP-WEIXIN -->
      <view :style="{ 'margin-top': 92 + 'px' }" class="list">
        <myitem v-if="list.length" :list="list" />
        <u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
      </view>

      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view :style="{ 'margin-top': '90px' }" class="list">
        <myitem v-if="list.length" :list="list" />
        <u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
      </view>

      <!-- #endif -->
      <u-loadmore
        v-if="list.length != 0"
        :status="status"
        @loadmore="loadmore"
      ></u-loadmore>
    </view>
  </view>
</template>

<script>
import pickerAddress from "@/components/citys/pickerAddress.vue";
import myitem from "@/components/list/c2c.vue";
import workType from "@/components/workType.vue";
import api from "../../../../api/routes.js";
import { mapGetters,mapMutations } from "vuex";
export default {
  components: {
    pickerAddress,
    myitem,
    workType,
  },
  computed: {
    ...mapGetters(["citiesInfor"]),
  },
  data() {
    return {
      layerHidden: false,
      cityArr: [],
      orderSort: undefined,
      city: "地区",
      page: 1,
      limit: 5,
      status: "loadmore",
      list: [],
      // 拿到的数据总条数
      total: 0,
      //判断是否发送请求的条件
      load: false,
      workType: "",
      wortypetitle: "工种",

      keyword: "",
      // classify: "",
      addr: true,
      mask: true,
      recomandTitle: "智能推荐",
      options1: [
        {
          label: "最新发布",
          value: 1,
        },
        {
          label: "智能推荐",
          value: 2,
        },
        {
          label: "工资最高",
          value: 3,
        },
        {
          label: "热门推荐",
          value: 4,
        },
      ],

      borderBottom: false,
      activeColor: "#2979ff",
    };
  },

  onLoad(e) {
    this.getList();
    	this.setSearchPage(0);
  },

  onReachBottom() {
    //页面抵达底部后，如果此时的status状态是加载更多，那就调用loadmore方法
    if (this.status === "loadmore") {
      this.loadmore();
    }
  },

  methods: {
    		...mapMutations(["setSearchPage"]),
    fnpickerAddress(val) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      val.status ? uni.hideTabBar() : uni.showTabBar();
      this.layerHidden = val.status;
      if (val.loadDate) {
        this.getList();
      }
    },
    async getList() {
      // 判断当前是否在请求，如果为true正在请求数据，就让他返回空，如果为false没在请求，就让它开始请求数据
      if (this.load) {
        return;
      }
      this.load = true;
      // 请求数据时，状态改为加载中状态
      this.status = "loading";
      const res = await this.$myRequest({
        url: api.pageSecondBuyList,
        method: "POST",
        data: {
          page: this.page,
          limit: this.limit,
          key: this.keyword, //搜索关键词
          orderSort: this.orderSort, //1:热门,2:最新,3:推荐，热门
          province: this.citiesInfor[0], //省
          city: this.citiesInfor[1], //市
          district: this.citiesInfor[2], //区
          workType: this.workType, //工种ID
        },
      });

      this.load = false;

      if (res.data.code !== 0) {
        return uni.showToast({
          title: res.msg,
          icon: "none",
        });

        this.status = "nomore";
      }

      this.total = res.data.page.totalCount;

      this.list = [...this.list, ...res.data.page.list];
      this.list.map((i) => {
        this.$set(i, "tells", i.tell.substr(0, 7) + "****");
				this.$set(i,'tellStatus',true)
      });

      // this.worker.tells = this.worker.tell.substr(0, 7) + '****'

      this.ismore();
    },

    ismore() {
      if (this.total === this.list.length) {
        this.status = "nomore";
      } else {
        this.status = "loadmore";
      }
    },
    // 加载下一页的数据
    loadmore() {
      // 每次出发该方法，都要使页数加一
      this.page++;
      // 页数加一后，在调用getList方法，获取下一页的数据
      this.getList();
    },
    handleOpen() {
      this.layerHidden = true;
    },
    handleClose() {
      this.layerHidden = false;
    },

    search(e) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      this.getList();
    },

    changeRecomand(index) {
      this.recomandTitle = this.options1[index - 1].label;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      this.getList();
    },

    closeDropdown(val) {
      console.log(val);
      this.$refs.uDropdown.close();
      this.layerHidden = false;
      let sendIds = "";
      if (val && val.length) {
        let ids = val.map((i) => i.id);
        sendIds = ids && ids.length ? ids.join(",") : "";
        this.wortypetitle = val.length ? `工种${val.length}个` : "工种";
      } else {
        this.wortypetitle = "工种";
      }
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      this.workType = sendIds;
      this.getList();
    },
  },
};
</script>
<style>
page {
  background: #efefef;
}
</style>
<style scoped lang="scss">
.workType {
  height: calc(100vh - 80px);
}

.layer-hidden {
  height: 90vh;
  overflow: hidden;
}

.empty {
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 150px 0 0 0;
}

.btnbox {
  display: flex;

  button {
    flex: 1;
    &.clear {
      margin-right: 20px;
    }
  }
}

.searchBox {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: #ffffff;
  padding-top: 20rpx;
  z-index: 4;

  .titleBar1 {
    width: 95%;
    margin: 10px auto 0 auto;
  }

  .titleBar {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search {
    height: 100%;
    width: 94%;
    padding: 0 3%;
    background: #ffffff;
  }
}

.u-m-p-50 {
  height: 40px;
}

.u-row-center {
  position: relative;
  z-index: 2;
  background: #ffffff;

  .addrBox {
    position: absolute;
    left: 0;
    width: 25%;
    height: 80rpx;
    // line-height: 80rpx;
    z-index: 999;
    background: #ffffff;
    text-align: center;
    color: rgb(96, 98, 102);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    .addr {
      width: 120upx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      word-break: break-all;
    }

    .icons {
      width: 20upx;
      margin-left: 4px;
    }
  }
}

.u-config-wrap {
  padding: 40rpx;
}

.slot-content {
  background-color: #ffffff;
  padding: 24rpx;

  .item-box {
    padding-bottom: 20px;
    height: calc(100vh - 180px);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      border: 1px solid $u-type-primary;
      color: $u-type-primary;
      padding: 8rpx 40rpx;
      border-radius: 100rpx;
      margin-top: 30rpx;
    }

    .active {
      color: #ffffff;
      background-color: $u-type-primary;
    }
  }
}
</style>
